<template>
    <div class="panl-box">
        <!-- 正在进行中 -->
        <ul class="list-box">
            <li class="item-title">
                <h3>正在进行中</h3>
                <p>{{runings.length}}</p>
            </li>
            <li v-for="(value,index) in runings" 
                @click="$emit('runToEnd',index)"
            :key="index">{{value}}</li>
            <li>
                <input type="checkbox">
                今天要做一个todelist
            </li>
        </ul>
        <!-- 已经完成 -->
        <ul class="list-box">
            <li class="item-title">
                <h3>已经完成的</h3>
                <p>{{ends.length}}</p>
            </li>
            <li v-for="(value,index) in ends" 
                @click="$emit('endToRun',index)"
            :key="index">
                <input type="checkbox" />{{value}}
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props:["runings","ends"],
    methods:{
        
    }
}
</script>

<style>
.panl-box{
    background: #ccc;
}
.list-box li{
    border-radius: 4px;
    background: white;
    max-width: 50%;
    margin: 10px ;
}
.item-title{
    display: flex;
}

</style>